import React from 'react';
import { 
  IonPage, 
  IonContent, 
  IonHeader, 
  IonToolbar, 
  IonButtons, 
  IonMenuButton, 
  IonTitle,
  IonButton,
  IonFab,
  IonFabButton,
  IonIcon,
  IonGrid,
  IonRow,
  IonCol,
  IonCard,
  IonCardHeader,
  IonCardTitle,
  IonCardContent
} from '@ionic/react';
import { add, notifications, mail, star ,person } from 'ionicons/icons';



const HomePage: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          {/* 移动端菜单按钮 - 左侧 */}
          <IonButtons slot="start">
            <IonMenuButton className="mobile-menu-button" />
          </IonButtons>
          
          <IonTitle>首页</IonTitle>
          
          {/* 桌面端菜单按钮 - 右侧 */}
          <IonButtons slot="end">
            <IonMenuButton className="desktop-menu-button" />
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      
      <IonContent className="ion-padding">
        <div className="welcome-message">
          <h2>欢迎使用应用</h2>
          <p>这是一个结合侧滑菜单和底部导航栏的 Ionic 应用</p>
        </div>
        
        {/* 快速操作卡片 */}
        <IonGrid>
          <IonRow>
            <IonCol size="6" sizeMd="3">
              <IonCard button routerLink="/tabs/notifications">
                <IonCardHeader>
                  <IonIcon icon={notifications} size="large" color="primary" />
                </IonCardHeader>
                <IonCardContent>
                  <IonCardTitle>通知</IonCardTitle>
                </IonCardContent>
              </IonCard>
            </IonCol>
            
            <IonCol size="6" sizeMd="3">
              <IonCard button routerLink="/tabs/messages">
                <IonCardHeader>
                  <IonIcon icon={mail} size="large" color="primary" />
                </IonCardHeader>
                <IonCardContent>
                  <IonCardTitle>消息</IonCardTitle>
                </IonCardContent>
              </IonCard>
            </IonCol>
            
            <IonCol size="6" sizeMd="3">
              <IonCard button routerLink="/tabs/favorites">
                <IonCardHeader>
                  <IonIcon icon={star} size="large" color="primary" />
                </IonCardHeader>
                <IonCardContent>
                  <IonCardTitle>收藏</IonCardTitle>
                </IonCardContent>
              </IonCard>
            </IonCol>
            
            <IonCol size="6" sizeMd="3">
              <IonCard button routerLink="/tabs/profile">
                <IonCardHeader>
                  <IonIcon icon={person} size="large" color="primary" />
                </IonCardHeader>
                <IonCardContent>
                  <IonCardTitle>个人资料</IonCardTitle>
                </IonCardContent>
              </IonCard>
            </IonCol>
          </IonRow>
        </IonGrid>
        
        {/* 内容区域 */}
        <div className="content-section ion-margin-top">
          <h3>最新动态</h3>
          <p>这里是应用的最新动态内容...</p>
        </div>
        
        {/* FAB 按钮 */}
        <IonFab vertical="bottom" horizontal="end" slot="fixed">
          <IonFabButton color="primary">
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
    </IonPage>
  );
};

export default HomePage;